<template>
	<view>
		<u-navbar title="" :autoBack="true" :placeholder="true" />
		<view class="title">
			<text>亲,&nbsp;&nbsp;欢迎登录</text>
			<view>没有账号? <span @click="register">立即注册</span></view>
		</view>
		<view class="input">
			<u-input v-model.trim="loginForm.username" placeholder="请输入手机号/邮箱/用户名" border="bottom" clearable></u-input>
			<view class="btn">
				<u-button
					text="确认"
					v-if="isSubmit"
					:disabled="loginForm.username == ''"
					color="linear-gradient(135deg,#fccf31,#f55555)"
					shape="circle"
					@click="submit"
				/>
				<u-button
					:text="buttonText"
					v-if="!isSubmit"
					:disabled="loginForm.username == '' || countdown > 0"
					color="linear-gradient(135deg,#fccf31,#f55555)"
					shape="circle"
					@click="code"
				/>
			</view>
		</view>
		<view class="bottom" v-if="isSubmit">
			<view class="radio" @click="selected">
				<view :class="{ active: isActive }"></view>
			</view>
			<view class="text"
				>已阅读并同意以下协议:<span @click="handleUserAgreement">《用户协议》</span><span @click="handlePrivacy">《隐私协议》</span></view
			>
		</view>
		<u-modal ref="uModal" :show="isShow" title="服务协议及隐私保护" :showConfirmButton="false">
			<view class="slot-content">
				<view class="text">
					为了更好地保护您的合法权益,请您阅读并同意以下协议
					<span @click="handleUserAgreement">《用户协议》</span>
					<span @click="handlePrivacy">《隐私协议》</span>, 未注册的手机号将自动完成账号注册
				</view>
				<view class="btn">
					<view class="no">
						<u-button plain text="不同意" color="#f55555" shape="circle" @click="disagree" />
					</view>
					<view class="yes">
						<u-button text="同意" shape="circle" color="linear-gradient(135deg,#fccf31,#f55555)" @click="agree" />
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script setup lang="ts">
import { isExist, getCode } from '@/api/login';
import { UserStore } from '@/store/modules/user';
// pinia
const user = UserStore();

/*变量*/
const isShow = ref(false);
const isActive = ref(false);
const isSubmit = ref(true);
const countdown = ref(0);
const buttonText = ref('获取验证码');
const loginForm = reactive({
	username: '',
});

/** 函数方法 */

onMounted(() => {});
// 确认
const submit = () => {
	if (isActive.value === false) {
		isShow.value = true;
		return;
	}
	isExist(loginForm)
		.then((res: { code: number }) => {
			if (res.code === 200) {
				isSubmit.value = false;
			} else {
				uni.showToast({
					title: '账号不存在',
					icon: 'none',
				});
			}
		})
		.catch(() => {
			isSubmit.value = false;
		});
};
const disagree = () => {
	isShow.value = false;
};
const agree = () => {
	isActive.value = true;
	isShow.value = false;
	submit();
};
// 验证码
watch(countdown, (newVal) => {
	buttonText.value = newVal > 0 ? `${newVal}秒` : '获取验证码';
});
const code = () => {
	getCode(loginForm).then((res: { code: number }) => {
		if (res.code === 200) {
			if (countdown.value === 0) {
				countdown.value = 60;
				const timer = setInterval(() => {
					countdown.value--;
					if (countdown.value === 0) {
						clearInterval(timer);
					}
				}, 1000);
			}
			uni.showToast({
				title: '发送成功',
				icon: 'none',
			});
		} else {
			uni.showToast({
				title: '发送失败',
				icon: 'none',
			});
		}
	});
};
// 注册
const register = () => {
	uni.navigateTo({ url: '/pages/register/register' });
};
// 隐私协议
function handlePrivacy() {
	console.log('隐私协议');
	uni.navigateTo({
		url: '/pages/agreement/privacy',
	});
}
// 用户协议
function handleUserAgreement() {
	console.log('用户协议');
	uni.navigateTo({ url: '/pages/home/home' });
}
// 同意协议
const selected = () => {
	isActive.value = !isActive.value;
};
</script>

<style lang="scss" scoped>
@import './login.scss';
</style>
